<template>
    <div class="main">
        <div class="news">
            <h2>新闻资讯</h2>
            <div class="in">
                <ul class="left">
                <li>陈建成童事长出席ATB集团召开年度销售大会</li>
                <li>中国电器工业协会分马办电机分会在卧龙召开理事长...</li>
                <li> 陈建成童事长访问中国驻德大使馆</li>
                <li>企业文化是企业持续经蓄的关键要素</li>
                <li>陈建成监事长在ATB集团2013年销售会议上发表重要...</li>
                <li>喜迎七— 唱响卧龙 年轻力量激发企业持久活力 卧龙举...</li>
            </ul>
            <ul class="right">
                <li>2013-07-30</li>
                <li>2013-07-30</li>
                <li>2013-07-30</li>
                <li>2013-07-30</li>
                <li>2013-07-30</li>
                <li>2013-07-30</li> 
            </ul>
            </div>
        </div>

        <div class="introduce">
            <h2>卧龙介绍</h2>
            <div class="mid1">
            <p>公司成立于1984年 ,</p>
            <p>经过近30年的发展</p>
            </div>
            <div class="bottom">
               <p>已成为电气制造 , 房地产开发和金融</p>
               <p>投资三业并举的综合性跨国...</p> 
            </div>
        </div>

        <div class="person">
            <h2>人才招聘</h2>
            <p>培养一流的人才 , 铸造一流的工程</p>
            <p>实现员工与企业的共同发展</p>
            <div class="img">
                <img class="more" src="../assets/img/9.jpg" alt="">
                <img class="grass" src="../assets/img/8.jpg" alt="">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.main{
    display: flex;
        justify-content: space-between;
    .news{
    padding: 15px;
    //怪异盒模型,设置padding、border不计算到宽高之中
    box-sizing: border-box;
    .in{
        margin-top: 15px;
        width: 600px;
        .left{
            float: left;
            li{
                 width: 390px;
                padding-top: 5px;
                display: -webkit-box;//设置盒模型为box
                -webkit-box-orient: vertical;//设置方向为垂直方向
                overflow: hidden;//溢出隐藏
                -webkit-line-clamp: 2;//超过两行添加省略号
            }
               
        }
        .right{
            float: right;
            li{
                color: #ccc;
                list-style: none;
                display: -webkit-box;//设置盒模型为box
                -webkit-box-orient: vertical;//设置方向为垂直方向
                margin-top: 4px;
            }
        }
    }
}
.introduce{
    padding: 15px;
    //怪异盒模型,设置padding、border不计算到宽高之中
    box-sizing: border-box;
    width: 300px;
    background-color: #ccc;
    h2{
        margin-top:-2px;
        padding-left: 5px;
    }
    .mid1{
        position: relative;
        top: 20px;
    }
    .bottom{
        position: relative;
        top: 60px;
        p{
            color:gray;
            margin-top: 8px;
        }
    }
}
.person{
    padding: 15px;
    //怪异盒模型,设置padding、border不计算到宽高之中
    box-sizing: border-box;
    width: 300px;
    h2{
        margin-top:-2px;
        padding-left: 5px;
    }
    p{
        margin-top:10px;
        padding-left: 5px;
    }
    .img{
        display: flex;
        justify-content: space-between;
        .more{
            position: relative;
            top: 100px;
            left: 15px;
            width: 70px;
            height: 20px;
        }
        .grass{
            position: relative;
            top: 20px;
            left: 40px;
        }
    } 
}
}

</style>